<template>
  <!--
    6、计算距离
    7、像素点 AMap.Pixel
    经纬度标准写法
    var position = new AMap.LngLat(116, 39);//标准写法
  -->
  <div class="flex">
    <div id="container" class="box" />

    <!-- 线路 -->
    <div v-show="togglePanel" id="panel" />
    <div>
      <el-button @click="useTileLayer">添加图层到地图</el-button>
      <el-button @click="useMarker">标点</el-button>
      <el-button @click="uselineArr">绘制折线</el-button>
      <el-button @click="useInfoWindow">标点+绑定事件+窗口信息(点击图标)</el-button>
      <el-button @click="usePixel">像素尺寸(地图容器上添加图标)</el-button>
      <el-button @click="useBounds">经纬度矩形边界(当前地图容器显示的的位置(经纬度))</el-button>
      <el-button @click="useSetFitView">默认包括所有覆盖物的情况</el-button>
      <el-button @click="usePolygon">多边形绘制</el-button>
      <el-button @click="useOverlayGroup">同时生成多个覆盖物</el-button>
      <el-button @click="useAMapUI">使用AMapUI放置图标</el-button>
      <el-button @click="usecruise(1)">巡航器1</el-button>
      <el-button @click="destroyMap">地图注销</el-button>

      <el-button @click="clearMap">删除所有覆盖物</el-button>

    </div>
  </div>

</template>

<script>

let map;
import basic from "./mixins/basic";
import cruise1 from "./mixins/cruise1";

export default {
  mixins: [basic, cruise1],
  data() {
    return {
      // 是否显示导航详情
      togglePanel: false,
      basicMapData: {
        zoom: 5, // 级别
        // center: [115.397428, 39.90923], // 中心点坐标
        viewMode: "3D"// 使用3D视图
      }
    };
  },
  mounted() {

  },
  methods: {
    usecruise(flag) {
      this["driving" + flag](map);
    },
    // 改变地图的中心点和层级
    changeMap(lnglat = [116.481181, 39.989792], zoom = 10) {
      map.setCenter(lnglat);
      map.setZoom(zoom);
    },
    destroyMap() {
      map.destroy();
      this.map = null;
    },
    initMap() {
      map = this.map;
      this.usecruise(1);
      // this.usePlugin();
      // 注销
      this.$once("hook:beforeDestroy", () => {
        console.log("注销地图");
        this.destroyMap();
      });

      // ---------------计算距离--------------------------------
      // var lnglat1 = new AMap.LngLat(116, 39);
      // var lnglat2 = new AMap.LngLat(117, 39);
      // var lnglat3 = lnglat1.offset(100, 50);// lnglat1向东100m，向北50m的位置的经纬度
      // var distance = lnglat1.distance(lnglat2);// 计算lnglat1到lnglat2之间的实际距离(m)
      // console.log(lnglat3, distance + "米", "distance");
    },
    //  插件的使用
    usePlugin() {
      console.log(map, "---");
      // 多个插件直接逗号拼接
      // setTimeout(() => {
      //   AMap.plugin("AMap.ToolBar,AMap.Scale,AMap.Driving", function() { // 异步加载插件
      //     const toolbar = new AMap.ToolBar(); // 缩放工具条
      //     const scale = new AMap.Scale(); // 比例尺
      //     console.log(scale, "scalescale");
      //     map.addControl(toolbar);
      //     map.addControl(scale);
      //     var driving = new AMap.Driving({
      //     // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      //       policy: AMap.DrivingPolicy.LEAST_TIME
      //     });
      //     var startLngLat = [116.379028, 39.865042];
      //     var endLngLat = [116.427281, 39.903719];

      //     driving.search(startLngLat, endLngLat, function(status, result) {
      //       console.log(status, "statusstatus");
      //     // 未出错时，result即是对应的路线规划方案
      //     });
      //   });
      // }, 3000);
    },
    // 使用 AMapUI
    useAMapUI() {
      const lngLats = this.getGridLngLats(map.getCenter(), 2, 2);
      console.log(lngLats, "lngLats");

      new AMapUI.SimpleMarker({
        iconLabel: "1",
        // 自定义图标地址
        iconStyle: "//webapi.amap.com/theme/v1.3/markers/b/mark_r.png",
        // 设置基点偏移
        offset: new AMap.Pixel(-19, -60),
        map: map,
        showPositionPoint: true,
        position: lngLats[0],
        zIndex: 100
      });

      new AMapUI.SimpleMarker({
        iconLabel: "2",
        // 自定义图标节点(img)的属性
        iconStyle: {
          src: "//webapi.amap.com/theme/v1.3/markers/b/mark_b.png",
          style: {
            width: "20px",
            height: "30px"
          }
        },
        // 设置基点偏移
        offset: new AMap.Pixel(-10, -30),
        map: map,
        showPositionPoint: true,
        position: lngLats[1],
        zIndex: 200
      });
    },
    // 覆盖物群组
    useOverlayGroup() {
      // 覆盖物1
      var polyline1 = new AMap.Polyline({
        path: [
          new AMap.LngLat("116.368904", "39.913423"),
          new AMap.LngLat("116.382122", "39.901176")
        ]
      });

      // 覆盖物2
      var polyline2 = new AMap.Polyline({
        path: [
          new AMap.LngLat("116.387271", "39.912501"),
          new AMap.LngLat("116.398258", "39.904600")
        ]
      });

      // 创建覆盖物群组，传入覆盖物组成的数组
      var overlayGroup = new AMap.OverlayGroup([polyline1, polyline2]);

      // 对此覆盖物群组设置同一属性
      overlayGroup.setOptions({
        strokeColor: "red",
        strokeWeight: 5
      });
      this.changeMap([116.387271, 39.904600], 13);
      // 统一添加到地图实例上
      map.add(overlayGroup);
    },
    // 多边形轮廓线的节点坐标数组
    usePolygon() {
      var path = [
        new AMap.LngLat(116.368904, 39.943423),
        new AMap.LngLat(116.382122, 39.901176),
        new AMap.LngLat(116.387271, 39.912501),
        new AMap.LngLat(116.398258, 39.904600)
      ];
      var polygon = new AMap.Polygon({
        path: path,
        fillColor: "red", // 多边形填充颜色
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: "red" // 线条颜色
      });
      this.changeMap([116.368904, 39.904600], 13);
      var onMarkerClick = function(e) {
        const { lat, lng } = e?.lnglat || {};

        console.log(lat, lng, "---");
      };
      polygon.on("click", onMarkerClick);// 绑定click事件
      map.add(polygon);
    },
    // 删除所有覆盖物
    clearMap() {
      // 单独移除点标记
      // map.remove(marker);
      // // 同时移除点标记和矢量圆形
      // map.remove([marker,circle]);
      map.clearMap();
    },
    // 自动适配到合适视野范围
    useSetFitView() {
      // 标点
      this.useInfoWindow();
      setTimeout(() => {
        // 绘制折线
        this.uselineArr();
        setTimeout(() => {
          // 自适应
          map.setFitView();
          //
          // 传入覆盖物数组，仅包括polyline和marker1的情况
          // map.setFitView([polyline,marker1]);//可直接传入标点位置 进行适配
        }, 2500);
      }, 1500);
    },
    // 标点+绑定事件+窗口信息
    useInfoWindow() {
      var infoWindow = new AMap.InfoWindow({
        anchor: "top-left",
        content: "这是信息窗体！"
      });
      var marker = new AMap.Marker({
        position: [116.481181, 39.989792]
      });
      map.add(marker);
      const that = this;
      var onMarkerClick = function(e) {
        // e.target就是被点击的 Marker
        // e.target.getPosition()  点击的位置
        that.onMarkerClick(infoWindow, e);
      };
      this.changeMap([116.481181, 39.989792]);
      marker.on("click", onMarkerClick);// 绑定click事件
    },
    onMarkerClick(infoWindow, e) {
      console.log("点击打开窗口", infoWindow, e);
      infoWindow.open(this.map, e.target.getPosition());
    },
    // 经纬度矩形边界
    useBounds() {
      var southWest = new AMap.LngLat(110, 20);
      var northEast = new AMap.LngLat(115, 25);
      var bounds = new AMap.Bounds(southWest, northEast);
      map.setBounds(bounds);
    },
    // 绘制折线
    uselineArr() {
      //  北京附近需要放大地图
      var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
      ];
      this.changeMap([116.368904, 39.904600], 13);
      var polyline = new AMap.Polyline({
        path: lineArr, // 设置线覆盖物路径
        strokeColor: "#3366FF", // 线颜色
        strokeWeight: 5, // 线宽
        strokeStyle: "solid" // 线样式
      });
      setTimeout(() => {
        map.add(polyline);
      }, 2000);
    },
    // 地图标点
    useMarker() {
      var marker = new AMap.Marker({
        position: [115.397428, 39.9]// 位置
      });
      this.changeMap([115.397428, 39.9]);
      map.add(marker);// 添加到地图
    },
    // 绘制图形
    useTileLayer() {
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      });
      this.changeMap();
      setTimeout(() => {
        map.add(trafficLayer);// 添加图层到地图
      }, 2000);
    },
    // Pixel
    usePixel() {
      var mapSize = map.getSize();// 获取地图大小，返回的是地图容器的像素大小
      var width = mapSize.width;
      var height = mapSize.height;
      console.log(width, height, "获取地图大小，返回的是地图容器的像素大小");
      const position = [116.405467, 39.907761];
      var marker = new AMap.Marker({
        position,
        icon: new AMap.Icon({
          size: new AMap.Size(40, 50), // 图标的大小
          image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
          imageOffset: new AMap.Pixel(0, -60)
        })
      });

      this.changeMap(position);
      map.add(marker);
    },
    // 返回一批网格排列的经纬度
    getGridLngLats(center, colNum, size, cellX, cellY) {
      var pxCenter = map.lnglatToPixel(center);

      var rowNum = Math.ceil(size / colNum);

      var startX = pxCenter.getX();
      var startY = pxCenter.getY();

      cellX = cellX || 70;

      cellY = cellY || 70;

      var lngLats = [];

      for (var r = 0; r < rowNum; r++) {
        for (var c = 0; c < colNum; c++) {
          var x = startX + (c - (colNum - 1) / 2) * (cellX);

          var y = startY + (r - (rowNum - 1) / 2) * (cellY);

          lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));

          if (lngLats.length >= size) {
            break;
          }
        }
      }
      return lngLats;
    }
  }
};
</script>

<style scoped lang="scss">
.box{
  width: 600px;
  height: 600px;
  flex-shrink: 0;

}
.box2{
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: red;
}
</style>
